<template>
	<div>


		<div class="kzf_vip">
			<h3>购买续费</h3>
			<span></span>
			<h1 class="renewa_taocan">套餐定价</h1>
			<div class="kzf_versions">
				<div>
					<h2 style="color: #9fadbd;">1</h2>
					<h1 class="kzf_forever">永久免费</h1>
					<p>年付低至0元/月</p>
					<p style="margin-top: 50px;">免费体验，功能受限。建议升级会员版本。</p>
				</div>
				<div>
					<h2>适用【B站UP主作品创作】</h2>
					<h1 class="kzf_forever"><span>￥</span>699<span>/月</span></h1>
					<p>年付低至<span style="color: #20d5d1;">419</span>元/月</p>
					<button style="background-color: #20d5d1;" @click="open">立即购买</button>

					<p>提供基础实用的视频数据帮助，辅助您实时监控账号动态，追踪热点趋势，助力作品创作。</p>
				</div>
				<div>
					<h2>适用【机构或企业】</h2>
					<h1 class="kzf_forever"><span>￥</span>2999<span>/月</span></h1>
					<p>年付低至<span style="color: #fac33e;">1799</span>元/月</p>
					<button style="background-color: #fac33e;">立即购买</button>
					<p>提供多维度查找UP主功能、UP主数据分析、投放管理和作品营销服务，全面提升导流效率，同时精确触达UP主私域流量，有效提升品牌口碑转化。</p>
				</div>
			</div>
			<!-- 会员特权对比 -->
			<div class="kzf_contrast">会员特权对比</div>
			<div class="kzf_contrast1">
				<img src="../assets/kzf_tu8.png" alt="">
				<img src="../assets/kzf_tu9.png" alt="">
				<img src="../assets/kzf_tu10.png" alt="">
			</div>

			<!-- up主分析 -->
			<div v-if="list.Data">
				<el-collapse v-model="activeNames" @change="handleChange">
					<el-collapse-item :title="list.Data.Modules[0].Name" name="1">

						<table class="kzf_table" border="1" rules="all" cellspacing="" cellpadding="">
							<tr class="kzf_table2">
								<td style="width: 275px;">{{list.Data.Modules[2].Name}}</td>
								<td>{{lists[0].ModulePurviewList[2].Tips}}</td>
								<td>{{lists[1].ModulePurviewList[2].Tips}}</td>
								<td>{{lists[2].ModulePurviewList[2].Tips}}</td>
							</tr>
							<tr class="kzf_table2 kzf_table3">
								<td style="width: 275px;">UP主详情</td>
								<td>{{lists[0].ModulePurviewList[2].Tips}}</td>
								<td>200次/日</td>
								<td>{{lists[2].ModulePurviewList[2].Tips}}</td>
							</tr>
							<tr class="kzf_table2">
								<td style="width: 275px;">达人检索结果</td>
								<td>前100条</td>
								<td>前500条</td>
								<td>前1000条</td>
							</tr>

						</table>

					</el-collapse-item>
					<el-collapse-item :title="list.Data.Modules[1].Name" name="2">
						<table class="kzf_table" border="1" rules="all" cellspacing="" cellpadding="">
							<tr class="kzf_table2">
								<td style="width: 275px;">视频检索</td>
								<td>{{lists[0].ModulePurviewList[2].Tips}}</td>
								<td>{{lists[1].ModulePurviewList[2].Tips}}</td>
								<td>{{lists[2].ModulePurviewList[2].Tips}}</td>
							</tr>
							<tr class="kzf_table2 kzf_table3">
								<td style="width: 275px;">视频详情</td>
								<td>{{lists[0].ModulePurviewList[2].Tips}}</td>
								<td>{{lists[1].ModulePurviewList[2].Tips}}</td>
								<td>{{lists[2].ModulePurviewList[2].Tips}}</td>
							</tr>



						</table>
					</el-collapse-item>

					<el-collapse-item :title="list.Data.Modules[10].Name" name="3">
						<table class="kzf_table" border="1" rules="all" cellspacing="" cellpadding="">
							<tr class="kzf_table2">
								<td style="width: 275px;">UP主排行榜</td>
								<td>前20条</td>
								<td>前100条</td>
								<td>前200条</td>
							</tr>
							<tr class="kzf_table2 kzf_table3">
								<td style="width: 275px;">品牌排行榜</td>
								<td>前50条</td>
								<td>前100条</td>
								<td>前200条</td>
							</tr>
						</table>
					</el-collapse-item>

					<el-collapse-item :title="list.Data.Modules[4].Name" name="4">
						<table class="kzf_table" border="1" rules="all" cellspacing="" cellpadding="">
							<tr class="kzf_table2">
								<td style="width: 275px;">常规数据导出</td>
								<td>x</td>
								<td>500条/月</td>
								<td>500条/月</td>
							</tr>
							<tr class="kzf_table2 kzf_table3">
								<td style="width: 275px;">定制数据导出</td>
								<td>x</td>
								<td>x</td>
								<td>1次/月</td>
							</tr>
						</table>
					</el-collapse-item>
				</el-collapse>

			</div>

		</div>
		<!-- 常见支付问题 -->
		<div class="kzf_common">
			<h1>常见支付问题</h1>
			<span></span>
			<p style="margin-top: 10px;">1.可以开具发票吗？</p>
			<h4>购买后，您可前往“个人中心——发票管理”开具发票。无特殊或不可抗力的情况下，我司将在10个工作日内开具纸质发票。我司可开具增值税普通发票或增值税专用发票，其服务名称一栏内容是*信息技术服务*服务费*，开具的发票金额均为含税价格，税率6%。
			</h4>
			<p>2.已购买艺恩星数会员后可以升级到更高权限版本吗？</p>
			<h4>在艺恩星数付费升级会员后如需升级到更高权限的会员版本，可以进入付费页面，点击对应高级版本升级，在跳转的支付页面支付差价即可。</h4>

			<p>3.可以对公打款吗？可以微信或支付宝吗？</p>
			<h4>支持对公打款。对公充值的用户需要先联系艺恩星数客服提供付款凭证（电子回单）及开通账号，客服处理账号升级并告知后，可前往发票管理页面开票。您也可以通过支付宝或微信支付进行付费。</h4>
			<p>4.线上开票注意事项</p>
			<h4>普票开具电子发票，专票开具纸质发票。<br>
				1.增普电子发票：提交开票申请后3个工作日内发送到用户填写的邮箱；（月末26日至月初5日期间不办理电子发票开票业务）<br>
				增专发票：提交开票申请后15个工作日内完成订单审核及发票寄送<br>
				2.正常情况下，开具的发票将以快递到付的形式寄出，若您的开票金额超过300元，则可享受寄付服务。</h4>
			<p>5.付费套餐到期后还可以继续使用吗？</p>
			<h4>当您购买的付费套餐过期后，将会自动转换为基础版，无法继续使用付费功能。</h4>
		</div>
		<!-- 微信扫码支付 -->
		<div class="kzf_saomazhifu" v-if="sao" style="width: 240px;height: 300px; background-color: #fff;position: absolute;top: 300px;left: 850px; z-index: 9999;border: 1px black solid; ">
			<p @click="sao=false" style="width: 100%;height: 50px;border-bottom: 1px solid #f2f2f2;text-align: center;line-height: 50px;font-size: 18px;">微信扫码支付</p>
			<img style="margin: 0 auto;display: block;margin-top: 15px;" src="../assets/kzf_tu12.png" alt="">
		</div>
	</div>
</template>

<script>
	import {
		Vip
	} from '@/api/search.js'
	export default {

		data() {
			return {
				list: {},
				activeNames: ['1', '2', '3', '4'],
				lists: {},
				num: 0,
                number:699,
				sao:false
			}
		},
		methods: {
			open() {
				this.$alert(`<hr> <div class="kzf2_box">
			<div class="kzf2_box1">
				
				<div>
				
				<p>选择版本：</p> 
				<img src="../assets/kzf_xing.png" alt="">
				<p class="kzf2_boxgeren">个人版 <span>￥</span>699 <span>/月</span></p>
				</div>
				<div>
					<!-- 2 -->
					<p>购买时长：</p>
					<button id="btn">1个月</button>
					<button id="btn2">6个月</button>
					<button id="btn3">12个月</button>
					<button id="btn4"> 24个月</button>
				</div>
				<div>
					<p>支付方式：</p>
					<button id="zhifu" class="kzf2_boxzhifu">支付宝</button>
					
					<button id="weixin" class="kzf2_boxweixin">微信</button>
					
					<p>对公转账？</p>
				</div>
				<div>
					<p>实付金额：</p>
					<p id="monney"></p>
				</div>
				<div>
					<button id="like">立即支付</button>
				</div>
			</div>
			<div class="kzf2_box2">
				<p>售前售后有疑问</p>
				<p>可添加专属客服咨询</p>
				<span></span>
			</div>
		</div>`, '购买付费', {
					dangerouslyUseHTMLString: true
				});
				setTimeout(() => {
					var btn = document.getElementById("btn");
					var btn2 = document.getElementById("btn2");
					var btn3 = document.getElementById("btn3");
					var btn4 = document.getElementById("btn4");
					var monney = document.getElementById("monney");
					var zhifu = document.getElementById("zhifu");
					var weixin = document.getElementById("weixin");
					var like = document.getElementById("like");
					
					btn.addEventListener("click", () => {
						btn.style.backgroundColor = '#5830a0';
						btn2.style.backgroundColor = '#fff';
						btn3.style.backgroundColor = '#fff';
						btn4.style.backgroundColor = '#fff';
						btn.style.color = "white"
						btn2.style.color = "#000"
						btn3.style.color = "#000"
						btn4.style.color = "#000"
						monney.innerText="￥699"
					})
					btn2.addEventListener("click", () => {
						btn.style.backgroundColor = '#fff';
						btn2.style.backgroundColor = '#5830a0';
						btn3.style.backgroundColor = '#fff';
						btn4.style.backgroundColor = '#fff';
						btn.style.color = "#000"
						btn2.style.color = "white"
						btn3.style.color = "#000"
						btn4.style.color = "#000"
						monney.innerText="￥3,354"
					})
					btn3.addEventListener("click", () => {
						btn.style.backgroundColor = '#fff';
						btn2.style.backgroundColor = '#fff';
						btn3.style.backgroundColor = '#5830a0';
						btn4.style.backgroundColor = '#fff';
						btn.style.color = "#000"
						btn2.style.color = "#000"
						btn3.style.color = "white"
						btn4.style.color = "#000"
						monney.innerText="￥5,028"
					})
					btn4.addEventListener("click", () => {
						btn.style.backgroundColor = '#fff';
						btn2.style.backgroundColor = '#fff';
						btn3.style.backgroundColor = '#fff';
						btn4.style.backgroundColor = '#5830a0';
						btn.style.color = "#000"
						btn2.style.color = "#000"
						btn3.style.color = "#000"
						btn4.style.color = "white"
						monney.innerText="￥8,400"
					})
					zhifu.addEventListener("click",()=>{
							zhifu.style.backgroundColor = '#5830a0';
							zhifu.style.color='white'
							weixin.style.backgroundColor='white';
							weixin.style.color='black'
					})
					weixin.addEventListener("click",()=>{
							zhifu.style.backgroundColor = 'white';
							zhifu.style.color='black'
							weixin.style.backgroundColor='#5830a0';
							weixin.style.color='white'
					})
					like.addEventListener("click",()=>{
						this.sao=true
					})
				}, 100)
			
			},
			handleChange(val) {
				console.log(val);
			},
			kzf_bian() {
				console.log(1222);
			}
		},
		created() {
			Vip({
					'r': 0.019386956629164454,
					// 'id': undefined
				})
				.then(res => {
					console.log("1", res.data)

					this.list = res.data;
					console.log("fd", this.list)
					this.lists = res.data.Data.Products;
				})
				.catch(err => console.error(err))
		}
	}
</script>
<style>
	.kzf_vip .el-collapse {
		width: 1360px;
		margin: 0 auto;
	}

	.kzf_vip #el-collapse-head-4031 {
		font-size: 20px !important;
	}

	.el-message-box {
		width: 920px;
		height: 470px;
	}

	.kzf2_box {
		width: 900px;
		height: 365px;
		/* border: 1px red solid; */
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 65px;
		padding-right: 65px;
		box-sizing: border-box;

	}

	.kzf2_box p {
		margin: 0;
		display: inline-block;
		font-size: 15px;
		color: #8787ac;
	}

	.kzf2_box1 {
		float: left;
	}

	.kzf2_box1 div {
		width: 100%;
		height: 20%;
		/* border: 1px red solid; */
		line-height: 50px;


	}

	.kzf2_box1 div:nth-child(2) button {
		width: 65px;
		height: 30px;
		margin-right: 25px;
		background-color: white;
		border: 1px #ececec solid;
		border-radius: 3px;
	}

	.kzf2_box1 div:nth-child(3) button {
		width: 90px;
		height: 30px;
		padding-left: 33px;

		background-color: white;
		border: 1px #ececec solid;
		border-radius: 3px;

	}

	.kzf2_box1 .kzf2_boxzhifu {
		background-image: url(../assets/kzf_zhi.png);
		background-repeat: no-repeat;
		background-position: 10px;

	}

	.kzf2_box1 .kzf2_boxweixin {
		background-image: url(../assets/kzf_wei.png);
		background-repeat: no-repeat;
		background-position: 10px;
	}

	.kzf2_box2 span {
		display: inline-block;
		width: 170px;
		height: 170px;
		background-image: url(../assets/kzf_kefu.png);
		background-repeat: no-repeat;
	}

	.kzf2_box1 div:nth-child(3) img {
		position: absolute;
		left: 15px;
		top: 4px;

	}

	.kzf2_box1 {
		width: 515px;
		height: 305px;
		border-right: 1px solid #f2f2f2;
		box-sizing: border-box;

	}

	.kzf2_box1 div:nth-child(5) button {
		display: block;
		margin: 0 auto;
		margin-top: 10px;
		width: 160px;
		height: 40px;
		color: white;
		background-color: #5830a0;
		border: 0;
	}

	.kzf2_box2 {
		width: 200px;
		float: right;
		/* background-color: blue; */
		text-align: center;
		margin-top: 40px;
	}

	.kzf_vipactive {
		color: white;
		background-color: #733ab9;
	}
</style>
<style scoped="scoped">
	.kzf_vip {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding-top: 22px;
		padding-left: 20px;
       position: relative;
	}

	.kzf_vip>h3 {
		font-size: 20px;
	}

	.kzf_vip>span {
		display: block;
		width: 54px;
		height: 3px;
		background-color: #7030a0;
		margin-left: 11px;
		margin-top: 2px;
	}

	.renewa_taocan {
		display: block;
		font-size: 40px;
		font-weight: 400;
		color: #4b4647;
		text-align: center;
		margin-top: 45px;
	}

	/* 套餐定价 */
	.kzf_versions {
		width: 1070px;
		height: 440px;
		/* border: 1px solid red; */
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		margin-bottom: 55px;
	}

	.kzf_versions div {
		text-align: center;
		padding-left: 30px;
		padding-right: 30px;
	}

	.kzf_versions div:nth-child(1) {
		width: 320px;
		height: 440px;
		background-image: url(../assets/kzf_tu5.png)
	}

	.kzf_versions div:nth-child(2) {
		width: 320px;
		height: 440px;
		background-image: url(../assets/kzf_tu7.png)
	}

	.kzf_versions div:nth-child(3) {
		width: 320px;
		height: 440px;
		background-image: url(../assets/kzf_tu6.png)
	}

	.kzf_versions div>h2 {
		font-size: 15px;
		font-weight: 400;
		color: #fff;
		text-align: center;
		margin-top: 77px;
	}

	.kzf_forever {
		margin-top: 63px;
		font-size: 40px;
		font-weight: 400;
		color: #2e384d;
	}

	.kzf_forever span {
		font-size: 15px;
	}

	.kzf_versions div>p:nth-of-type(1) {
		background-color: #f6f8fa;
		width: 130px;
		font-size: 14px;
		height: 22px;
		line-height: 22px;
		margin: 0 auto;
		border-radius: 20px;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.kzf_versions button {
		width: 228px;
		height: 35px;
		color: #fff;
		text-align: center;
		line-height: 35px;
		border: 0;
		font-size: 15px;
	}

	.kzf_versions div>p:nth-of-type(2) {
		display: inline-block;
		font-size: 10px;
		text-align: left;
		margin-top: 20px;
	}

	.kzf_contrast {
		width: 250px;

		font-size: 40px;
		color: #454647;
		margin: 0 auto;
	}

	.kzf_contrast1 {
		width: 1080px;
		/* background-color: #20d5d1; */
		margin: 0 auto;
		position: relative;
		height: 150px;
	}

	.kzf_contrast1 img:nth-child(1) {
		position: absolute;
		left: 240px;
		top: 40px;
	}

	.kzf_contrast1 img:nth-child(2) {
		position: absolute;
		left: 600px;
		top: 40px;
	}

	.kzf_contrast1 img:nth-child(3) {
		position: absolute;
		left: 960px;
		top: 40px;
	}

	/* biao ge */
	.kzf_table {
		border: 1px solid #ebeef5;
	}

	.kzf_table2 td {
		width: 360px;
		text-align: center;
		height: 47px;
	}

	.kzf_table2 td:nth-child(1) {
		background-color: #fafafa;
	}

	.kzf_table3 td {
		background-color: #fafafa;
	}

	/* 常见支付问题 */
	.kzf_common {
		width: 100%;
		text-align: center;
		background-color: #f9fafc;
		padding-left: 190px;
		padding-right: 190px;
		padding-bottom: 20px;
		padding-top: 40px;
	}

	.kzf_common h1 {
		font-weight: 400;
	}

	.kzf_common span {
		display: block;
		width: 40px;
		height: 6px;
		background-color: #7030a0;
		margin: 0 auto;
		margin-top: 12px;

	}

	.kzf_common p {
		display: block;
		text-align: left;
		margin-bottom: 10px;
	}

	.kzf_common h4 {
		display: block;
		font-size: 14px;
		font-weight: 200;
		text-align: left;
		margin-bottom: 30px;
	}

	/*隐藏显示 */
</style>
